import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
import XxtvCard from "../card/xxtv-card";
import XVtable from "../../antd/table/table";
import TuixiuDetailComponent from "./tuixiu-detail";
import http from "../../utils/request";
import { getTuixiuRuleAPI } from "../../api/api";
/**
 * 
 * @returns 
 * @description 推修规则 
 */
const TuixiuViewModule = ({ onRef }) => {
    const [loading, setLoading] = useState(true);
    const [state, setState] = useState({
        totalCount: 0,
        list: []
    });
    const [params, setParams] = useState({
        pageSize: 20,
        pageIndex: 1
    });
    const detailRef = useRef();



    // 切换分页
    const onChange = (value, options) => {
        setParams({
            ...params,
            pageSize: 20,
            pageIndex: value
        })
    }


    const columns = [
        {
            title: '合作店简称',
            dataIndex: 'foursShopName',
            key: 'foursShopName',
            ellipsis: true,
        },
        {
            title: '合作店等级',
            dataIndex: 'category',
            key: 'category'
        },
        {
            title: '主营品牌',
            dataIndex: 'mainCarBrandName',
            key: 'mainCarBrandName'
        },
        {
            title: '服务区域',
            dataIndex: 'serviceArea',
            key: 'serviceArea',
            ellipsis: true,
        },
        {
            title: '可修品牌',
            dataIndex: 'carBrandName',
            key: 'carBrandName',
            ellipsis: true,
        }
    ]


    // 查看一个详情
    const onClickDetail = (record) => {
        detailRef.current.init({
            id: record.id
        })
    }

    // 获取数据
    const getList = (object) => {
        http.post({
            url: getTuixiuRuleAPI,
            before: () => setLoading(true),
            params: {
                ...object
            },
            success: res => {
                const { totalCount = 0, list = Array } = res?.data;
                setState({
                    totalCount,
                    list
                })
            },
            failure: msg => {
                console.log("未获取到推修规则列表", msg);
            },
            complete: () => setLoading(false)
        })
    }

    useEffect(() => {
        getList(params);
    }, [params])


    useImperativeHandle(onRef, () => ({
        params,
        setParams: (object) => {
            setParams({
                ...params,
                ...object
            })
        }
    }))

    return (
        <>
            <TuixiuDetailComponent
                onRef={detailRef}
            />
            <XxtvCard
                title="推修规则"
            >
                <XVtable
                    loading={loading}
                    columns={columns}
                    dataSource={state.list}
                    pagination={{
                        onChange: onChange,
                        total: state.totalCount,
                        defaultPageSize:params.pageSize
                    }}
                    onClick={onClickDetail}
                />
            </XxtvCard>
        </>
    )
}
export default TuixiuViewModule;